<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-bar position="name*count" />
    </v-chart>
  </div>
</template>

<script>
    const data = [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 145 },
        { year: '1958 年', sales: 48 },
        { year: '1959 年', sales: 38 },
        { year: '1960 年', sales: 38 },
        { year: '1962 年', sales: 38 },
    ];

    const scale = [{
        dataKey: 'count',
    }];

    export default {
        data() {
            return {
                data,
                scale,
                height: 400,
            };
        },
        props:{
            dataSource:Array,
            title:String
        }
    };
</script>